<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY.gallery.scrollspy</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<!--
<link rel="shortcut icon" href="http://docs.kissyui.com/kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="http://docs.kissyui.com/kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="http://docs.kissyui.com/kissy-dpl/base/assets/kissy-docs.css"/>
-->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0pr1/??kissy.js,sizzle-min.js" charset="utf-8"></script>
<script src="./scrollspy.js" charset="utf-8"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<!--
<script src="http://docs.kissyui.com/kissy-dpl/base/assets/kissy-docs.js"></script>
-->
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20120621",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
<style type="text/css">
    .scrollspy-area {
        height: 200px;
        overflow: auto;
        position: relative;
    }
</style>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>yourGallery</span>
    </div>
			<div class="s-section">				
<p>作者：qinian.wmq@taobao.com(七念)</p>
<p>功能：随着指定区域内的scrollbar滚动，高亮当前视窗内模块所对应的导航元素</p>
<p>描述：很多长页面都会设有区块锚点，用户通过页内导航条可以迅速导航到对应区块。相应地，当用户把scrollbar滚动到某个区块时,相应的导航也应该会被置于激活状态。这是一个很常见的需求，这个组件实现了一个KISSY版的ScrollSpy。</p>
<p>源码：<a href="scrollspy.js">scrollspy.js</a></p>
</div>

    <h3 class="s-title">Demo - 功能点</h3>
    <div class="s-section">
        <div class="s-demo">
            <div>
                <div class="span3 well" style="margin-left: 20px;">
                    <ul class="nav nav-list" id="s_index_r_nav">
                        <li><a data-href="#J_Home" href="#">Home</a></li>
                        <li><a data-href="#J_Library" href="#">Library</a></li>
                        <li><a data-href="#J_Application" href="#">Applications</a></li>
                        <li><a data-href="#J_Profile" href="#">Profile</a></li>
                        <li><a data-href="#J_Settings" href="#">Settings</a></li>
                        <li><a data-href="#J_Help" href="#">Help</a></li>
                    </ul>       
                </div>
                <div class="span7 scrollspy-area">
                  <div id="J_Home">
                    <h3>Home</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                  </div>
                  <div id="J_Library">
                    <h3>Library</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                  </div>
                  <div id="J_Application">
                    <h3>Applications</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                  </div>
                  <div id="J_Profile">
                    <h3>Profile</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    
                  </div>
                  <div id="J_Settings">
                    <h3>Settings</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    
                  </div>
                  <div id="J_Help">
                    <h3>Help</h3>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                    <p>Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.Branching allows you to build new features or test out ideas without putting your main project at risk. In git, branch is a sort of bookmark that references the last commit made in the branch. This makes branches very small and easy to work with.</p>
                  </div>
                </div>

            </div>
            <script>
                KISSY.ready(function() {
                    KISSY.use("gallery/scrollspy/1.0/scrollspy", function(S, ScrollSpy){
                        new ScrollSpy({
                            offset: 0,
                            navContainer: "#s_index_r_nav",
                            activerSelector: ".nav li",
                            scrollArea: ".scrollspy-area",
                            navSelector: "#s_index_r_nav.nav li > a"
                        });
                    });
                });
            </script>
        </div>
    </div>

    <h3 class="s-title">API</h3>
    <div class="s-section">
        <h4 class="s-api-title">构造器</h4>
        <div class="s-api-method">
                new ScrollSpy(ConfigObj);
        </div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            ConfigObj: {
            <ul class="s-list">
                <li>{Number} [ <em>offset</em> = 0 ] 距离scroll区域顶部的位移。</li>
                <li>{String} [ <em>navContainer</em> = "#s_index_r_nav" ] 导航区块的选择器。</li>
                <li>{String} [ <em>activerSelector</em> = ".nav li" ] 需要被激活的元素的选择器。</li>
                <li>{String} [ <em>scrollArea</em> = ".scrollspy-area" ] 内容区域的选择器。</li>
                <li>{String} [ <em>navSelector</em> = "#s_index_r_nav.nav li > a" ] 导航元素的选择器。</li>
            </ul>
            }
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">ScrollSpy实例</div>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">
        <ul class="s-list">
            <li>对DOM结构的要求是，在导航器中设置属性data-href,值为它所对应的内容区域的选择器. 例如：
                <br /><br />
                <pre style="width:660px; background-color: whiteSmoke; padding: 10px;">&lt;ul class=&quot;nav nav-list&quot; id=&quot;s_index_r_nav&quot;&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Home&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Library&quot; href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Application&quot; href=&quot;#&quot;&gt;Applications&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Profile&quot; href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Settings&quot; href=&quot;#&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-href=&quot;#J_Help&quot; href=&quot;#&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>  
            </li>
        </ul>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2011~2012, KISSY Team.
</div>
</body>
</html>